<template>
	<view>
		<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" circular
			:style="'height:'+getImgStyle">
			<swiper-item v-for="(swiper,s) in swipers" :key="s">
				<view class="swiper-item">
					<image :src="swiper.src" mode="" class="swiper-img" :style="'height:'+getImgStyle"
						@click="perView(s)">
					</image>
				</view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	export default {
		name: "swiper-banner",
		data() {
			return {

			};
		},
		props: {
			swipers: {
				type: Object | Array
			},
			height: {
				type: Number
			},
			perview: {
				type: Boolean
			}
		},
		computed: {
			getImgStyle() {
				if (this.height) {
					return this.height + 'rpx'
				}
			},
			getUrls() {
				let swiper = Object.values(this.swipers)
				return swiper.map(item => {
					return item.src
				})
			}
		},
		methods: {
			perView(index) {
				if (this.perview) {
					uni.previewImage({
						current: index,
						urls: this.getUrls,
						loop: true
					});
				}
			}
		},
	}
</script>

<style scoped>
	swiper,
	.swiper-img {
		width: 750rpx;
		height: 350rpx;
	}
</style>